<template>

	<view class="header">
		<image class="header_logo" src="@/static/images/logo.png" mode=""></image>
	</view>
	<view class="body">
		<view class="name">
			Hey,SMIHE
		</view>
		<view class="welcome">
			欢迎您登录！
		</view>
		<view class="desc">
			继续您的健康趣味的喝水之旅吧！
		</view>
	</view>

	<view class="submit" v-if="!show">
		<rui-button text="一键授权登录" @click="login"></rui-button>
	</view>

	<view class="popup" v-else>
		<view class="">
			<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl" v-if="avatarUrl"></image>
				<view class="avatar-defalut" v-else>
					点击设置头像
				</view>
			</button>
		</view>
		<view class="">
			<input type="nickname" class="input" v-model="nickname" @input="onNickname" placeholder="选择或请输入昵称" />
		</view>

		<view class="submit">
			<rui-button text="立即登录" @click="submit"></rui-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		userLogin,
	} from "@/common/api.js"
	import {
		userStore
	} from "@/store/index.js";
	import config from "@/common/config";
	import tools from "@/util/tools.js"
	// import cache from "@/util/cache.js"


	const user = userStore();

	let avatarUrl = ref("")
	let avatar = ref("")
	let nickname = ref("")
	let show = ref(false)
	let type = ref('create')

	let url = ""
	onLoad(opts => {
		url = opts.black;
	})

	const createUrl = () => {
		let params = {
			...config.baseApi,
			...{
				timestamp: Date.now()
			}
		};
		params.sign = tools.createSign(params, [], config.baseKey)
		return config.baseUrl + '/tOiJfWYDYXoX?' + tools.objectToQuery(params)
	}

	const onChooseAvatar = (e) => {
		uni.uploadFile({
			url: createUrl(),
			filePath: e.detail.avatarUrl,
			name: 'file',
			success: (uploadFileRes) => {
				let image = JSON.parse(uploadFileRes.data).data;
				type.value = "upload";
				avatar.value = image;
				avatarUrl.value = config.baseImg + image;
			}
		});
	}

	let openid = "";
	const login = () => {
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true,
			success: function(event) {
				const {
					code
				} = event
				let device = 'miniapp';
				// #ifdef APP-PLUS
				device = 'app'
				// #endif

				userLogin({
					code,
					device
				}).then(res => {
					console.log(res)
					if (res.msg == 'create' || !res.data.nickname || !res.data.avatar) {
						show.value = true;
						openid = res.data.openid;
						return false;
					}
					success(res)
				})
			},
			fail: function(err) {
				// 登录授权失败
				// err.code是错误码
			}
		})
	}



	const submit = () => {
		if (!nickname.value) {
			uni.$rui.toast("请输入或选择昵称");
			return false;
		}

		let data = {
			openid,
			nickname: encodeURIComponent(nickname.value),
			avatar: avatar.value,
			type: type.value,
		}
		console.log(1111, data)
		userLogin(data).then(success)
	}

	const success = res => {
		console.log(1111, )
		if (res.data.nickname) res.data.nickname = decodeURIComponent(res.data.nickname);
		user.setInfo(res.data)
		uni.showToast({
			title: "登录成功"
		})
		url = url || '/pages/tabbar/index/index'
		setTimeout(() => {
			uni.redirectTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			})
		}, 1500)
	}
</script>

<style lang="scss">
	.popup {
		position: fixed;
		left: 50%;
		bottom: 0;
		background: #fff;
		width: 100%;
		transform: translate(-50%, 0);
		box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, .06);
		border-radius: 10rpx;
		padding: 50rpx 0 150rpx;
		animation: pop .5s;

		.input {
			text-align: center;
			margin: 30rpx;
			border-bottom: 1rpx solid #eee;
			padding-bottom: 25rpx;
		}

		.avatar-btn {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			padding: 0;
			background: #ddd;

			.avatar-defalut {
				font-size: 24rpx;
				text-align: center;
				line-height: 150rpx;
			}

			.avatar {
				width: inherit;
				height: inherit;
				border-radius: inherit;
			}
		}
	}

	@keyframes pop {
		from {
			bottom: -30%;
		}

		to {
			bottom: 0;
		}
	}

	.header {
		height: 350rpx;
		width: 100%;
		// background: var(--color);
		position: relative;
		text-align: center;

		&::before {
			content: "";
			display: block;
			height: 200rpx;
			width: 150rpx;
			background: var(--color);
			// border-radius: 50%;
			filter: blur(80rpx);
			position: absolute;
			transform: rotate(30deg);
			top: 200rpx;
			left: 0;
			z-index: -1;
		}

		&::after {
			content: "";
			display: block;
			height: 100rpx;
			width: 200rpx;
			background: var(--color);
			border-radius: 50%;
			filter: blur(100rpx);
			position: absolute;
			top: 150rpx;
			right: 0;
		}

		// &:before {
		// 	content: "";
		// 	background: #f5f6f7;
		// 	width: 150%;
		// 	height: 400rpx;
		// 	border-radius: 50%;
		// 	position: absolute;
		// 	left: -25%;
		// 	bottom: -50%;
		// }

		&_logo {
			width: 300rpx;
			height: 200rpx;
			margin-top: 75rpx;
		}
	}

	.body {
		text-align: center;
		padding: 0;
		position: relative;

		.name {
			font-size: 50rpx;
			color: var(--color);
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.desc {
			color: gray;
			font-size: 24rpx;
			margin-top: 10rpx;
		}

	}

	.submit {
		margin: 30% 20rpx 0;

		.checkbox {
			margin-top: 20rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}

		.button {
			font-size: 28rpx;
			line-height: 80rpx;
			color: #fff;
			border-radius: 10rpx;
			background: var(--color);
			margin-top: 150rpx;

			&::after {
				border: none
			}
		}
	}
</style>